<template>
    <div  class="exam">
        <div v-show="analysisDialogVisible" class="answer-analysis-shadow" style="position:fixed;top:0;left:0;width:100%;height:100%;z-index:10;background:#000;opacity:0.3;"></div>
        <analysisDialog @close="closeAnalysisDialog" :isShowAnswer="false" :isShowAnalysis="true" v-if="analysisDialogVisible" :curQuestion="questionList[currentQuestion-1]" ></analysisDialog>
        <div class="examBox" v-show="!isEndExam">
            <!-- 倒计时 -->
            <Countdown
                v-if="reFresh"
                :endTime="endTime"
                :startTime="startTime"
                endMsg="考试结束"
                style="position:absolute;right:70px;font-weight:bold;z-index:1000"
                :style="{'top':isShowExamList?'32px':'17px'}"
                ref="Countdown"
                @submit='submitPaper'
            />
            <div class="exam-wrap"  v-show="!isShowExamList">
                <!-- 计算器 -->
                <Calculator v-show="isShowCalculator" @close="closeCalculator"/>
                <!-- 头部 -->
                <div class="box" v-for="(question,index) in questionList">
                    <div class="headerBox"  v-show="index == currentQuestion-1">
                        <div class="firstLine">
                            <div style="height:32px;">
                                <template v-for="(type,idx) in typeList" v-if="type == currentType">  
                                  <div class="title">
                                    {{numToHanzi(idx)}}、{{qusTypeToName(currentType+'')}} 第<s class="r-c" style="text-decoration: none;">{{question.num}}</s>题
                                  </div>
                                </template>

                            </div>
                            <div class="right">
                                <div class="examTime">
                                    考试剩余时间：
                                </div>
                                <div class="number">
                                    机号：<span class="r-c">1</span>
                                </div>
                            </div>
                        </div>
                        <!-- 题型介绍 -->
                        <div class="secondLine">
                            <div v-for="(item,idx) in questionDescribeList" class="introduction" v-show="item.type==currentType">
                              {{item.describe}}
                            </div>
                        </div>
                    </div>
                    <!-- 内容部分 -->
                    <div class="contentBox" v-show="index == currentQuestion-1">
                        <!-- 计算分析题和简答题 -->
                        <div class="question-box2"  v-show="(question.type>=4)"> 
                            <div class="question-info" id="div_q_info">
                                <div class="hd">
                                    <i class="icon-book"></i>
                                    <strong>资料区</strong>
                                    <span class="more">
                                        <span class='clearTg' @mousedown='clickUnMake'>取消标记</span>
                                        <span class='markTg' @mousedown='clickMake'>标记文字</span>
      
                                        <span id="zoomb" unselectable="on" @click="zoomBig(1)" :style="{display: isShowZoomBigBtn}">
                                            <i class="icon-zoom-in"></i>
                                            放大窗口
                                        </span>
                                        <span id="zooms" :style="{display: isShowRecoverBtn}" @click="zoomBig(0)">
                                            <i class="icon-zoom-out"></i>
                                            恢复窗口
                                        </span>
                                    </span>
                                </div>
                                <div class="bd"  user-modify="read-only">
                                  <!-- contenteditable="false" -->
                                    <div id="ti-muilt-question" class="i-question user-select" :style="{height:zoomBigHeight}">
                                        <div id="kebiaojiQY" v-html = "question.title" :contenteditable="isContenteditable">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- 答题区域 -->
                            <div class="question-opt" :style="{'height':textAreaHeight+'px'}">
                                <div class="toolbar" :style="{'height':question.children&&question.children.length>7?'70px':'36px'}">

                                    <span class="more" style="position:relative">
                                        <span unselectable="on" @click="copyContent">
                                            <i class="icon-copy"></i>
                                            复制
                                        </span>
                                        <span unselectable="on" @click="cutContent">
                                            <i class="icon-cut"></i>
                                            剪切
                                        </span> 
                                        <span unselectable="on" @click="pasteContent">
                                            <i class="icon-paste"></i>粘贴
                                        </span>
                                        <span @click="isFormulaBtnShow = !isFormulaBtnShow;">
                                            <i class="icon-formula"></i>公式和符号
                                        </span>
                                        <span id="div_Matrix"   @click="isTableBtnShow=!isTableBtnShow">
                                            <i class="icon-matrix"></i>
                                            表格和矩阵
                                        </span>
                                        <span class="exam_set_btn_calc" @click="isShowCalculator=!isShowCalculator">
                                            <i class="icon-cal"></i>
                                            计算器
                                        </span>
                                        <span @click="zoomBig(3)" :style="{display: isShowZoomBigBtn}" >
                                            <i class="icon-zoom-in"></i>
                                            放大窗口
                                        </span>
                                        <span :style="{display: isShowRecoverBtn}"  @click="zoomBig(4)">
                                            <i class="icon-zoom-out"></i>恢复窗口
                                        </span>
                                        <div class="toolbar-pop pop-formula" v-show="isFormulaBtnShow"  style="position:absolute;right:420px;top:40px;">
                                            <span class="arrow"></span>
                                            <div class="menuDiv" style="width:325px;">
                                                <ul class="title">
                                                    <li @click="changeFormulaShowIdx(num)" v-for="(name,num) in ['常用公式','数学符号','希腊字母']" :class="{'current':num==formulaShowIdx}">{{name}}</li>
                                                </ul>
                                                <ul class="tool-box" v-show="formulaShowIdx==0">
                                                    <li class="" @click="addFraction(0,num)" v-for="(icon,num) in 13" :style="{backgroundPosition:num<9?-34*num+'px' +' -136px':-34*(num-9)+'px'+' -170px'}"></li>
                                                </ul>
                                                <ul class="tool-box" v-show="formulaShowIdx==1">
                                                    <li class="" @click="addFraction(1,num)" v-for="(icon,num) in 17" :style="{backgroundPosition:num<9?-34*num+'px' +' 0px':-34*(num-9)+'px'+' -34px'}"></li>
                                                </ul>
                                                <ul class="tool-box" v-show="formulaShowIdx==2">
                                                    <li class="" @click="addFraction(2,num)" v-for="(icon,num) in 11" :style="{backgroundPosition:num<9?-34*num+'px' +' -68px':-34*(num-9)+'px'+' -102px'}"></li>
                                                </ul>
                                            </div>
                                        </div>
                                        <div class="toolbar-pop pop-formula1" v-show="isTableBtnShow" style="position:absolute;right: 140px; top: 40px;width: 132px;height:auto;">
                                            <span class="arrow" style="left:60px;"></span>
                                            <div class="menuDiv2">
                                                <div class="hasIcon" @click="addTable(2)"><a href="javascript:void(0);"><i class="icon im2">&nbsp;</i>插入2*2矩阵</a></div>
                                                <div class="hasIcon" @click="addTable(3)"><a href="javascript:void(0);"><i class="icon im3">&nbsp;</i>插入3*3矩阵</a></div>
                                            </div>
                                        </div>
                                    </span>
                            
                                </div>
                                <div class="answer-area" :style="{'height':question.children&&question.children.length>7?textBoxHeight-34+'px':textBoxHeight+'px'}" contenteditable="false">
                                    <ul class="ul-more" style="width: 400px; height: 34px; white-space: nowrap;" :style="{'top':question.children&&question.children.length>7?'40px':'6px;'}">
                                        <li :class="{cur:question.activeSubQus==num}" v-for="(subQus,num) in question.children"><a  @click="choosechildren(num)" href="javascript:void(0)" >要求({{num+1}})</a></li>
                                    </ul>
                                    <ul class="ul-more-block am-margin-top-sm">
                                        <li v-for="(subQus,num) in question.children" v-show="question.activeSubQus==num">
                                            <div class="user-select" v-html="clearContent(subQus.title)"></div><div id="ti-muilt-editor"><div><strong>请在下方答题区内作答。</strong></div>
                                              <!-- 保存进度 -->
                                              <!-- <Ueditor :writeMsg="defaultMsg1"  :id="'ueditor'+num" :config="config1"  ref="ue1" @ready="ready" style="position:relative;z-index:0;"></Ueditor>  -->
                                              <div class="txtArea"  v-if="subQus.userAnswer&&subQus.userAnswer.length>0" v-html="subQus.userAnswer" contenteditable="true" @click="getRange"  ref="txtAreaContent" @change="txtAreaChange($event,subQus)" @blur="txtAreaChange($event,subQus)">
                                              </div>
                                              <!-- 模板 -->
                                              <div class="txtArea" v-if="subQus.template&&subQus.template.length>0" v-html="subQus.template" contenteditable="true" @click="getRange"  ref="txtAreaContent" @change="txtAreaChange($event,subQus)" @blur="txtAreaChange($event,subQus)">
                                              </div>
                                              <div class="txtArea"  v-if="!subQus.template&&!subQus.userAnswer" contenteditable="true" @click="getRange"  ref="txtAreaContent" @change="txtAreaChange($event,subQus)" @blur="txtAreaChange($event,subQus)">
                                              </div>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <!-- 单选和多选显示 -->
                        <div class="question-box" v-show="(question.type==0||question.type==1)">
                            <!-- 内容头部 -->
                            <div class="headerPart">
                                <div class="leftPart">
                                    <div class="icon"/>
                                    <div>答题区</div>
                                </div>
                                <div class="rightPart" @click="isShowCalculator=!isShowCalculator">
                                    <div class="icon"/>
                                    <div>计算器</div>
                                </div>
                            </div>
                            <!-- 内容主体 -->
                            <div class="content">
                                <!-- <button @click="add">add</button>
                                <vue-ueditor-wrap v-model="msg" :config="myConfig"  @ready="ready"></vue-ueditor-wrap> -->
                                <div class="question-item">
                                    <div class="title">
                                        <span style="position:absolute;left:14px;">{{question.num}}.</span>
                                        <div style="display:inline-block;padding-left:10px;" v-html="question.title"></div>
                                    </div>
                                    <div class="choiceBox">
                                        <label class="choice" v-for="(option,idx) in question.options">
                                            <!-- 单选 -->
                                            <input style="display:inline-block;" type="radio" :checked="question.userAnswer&&question.userAnswer.indexOf(option.optionName)>=0"  :name="index" @change="oneChoiceChoose(question.questionId,option.optionName)" v-if="question.type==0"/>
                                            <!-- 多选 -->
                                            <input style="display:inline-block;" type="checkbox" :checked="question.userAnswer&&question.userAnswer.indexOf(option.optionName)>=0" :name="index" @change="multipleChoiceChoose(question.questionId,option.optionName)" v-if="question.type==1"/>
                                            {{option.optionName}}.&nbsp;
                                            <div style="display:inline-block;" v-html="option.content"></div>   
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                
                </div>
                <!-- 内容end -->
                <!-- 底部 -->
                <div class="footer">
                    <div class="img1" @click="myUserInfoToggle"><img  src="../../static/images/btn-user-info.png" alt=""></div>
                    <div class="img2" @click="openAnalysisDialog"><img  src="../../static/images/wtfk.png" alt=""></div>
                    <div class="img3" v-if="isShowCoefficientsTableBtn" @click="openCoefficientsTable"><img  src="../../static/images/xishubiao.png" alt=""></div>
                    <div class="mark" :style="{'margin-left':isShowCoefficientsTableBtn?'40px':'120px'}" v-for="(question,index) in questionList" v-if="currentQuestion == index+1">
                        <label>
                            <input type="checkbox" @change="markQuestion" :checked="question.marked">
                            标记本题
                        </label>
                    </div>
                    <div class="prev"  @click="goPrevQuestion">
                        <img src="../../static/images/btn-prev.png" alt="">
                    </div>
                    <div class="next" @click="goNextQuestion">
                        <img src="../../static/images/btn-next.png" alt="">
                    </div>
                    <div class="select"  @click="goExamList">
                        <img src="../../static/images/btn-select.png" alt="">
                    </div>
                    <div class="pause" @click="parseImgToggle">
                        <img src="../../static/images/btn-pause.png" alt="">
                    </div>
                    <!-- savePaperProgress -->
                    <div class="save" @click="savePaperProgress">
                        <img src="../../static/images/btn-save.png" alt="">
                    </div>
                    <div class="end" @click="submitPaper">
                        <img src="../../static/images/btn-end.png" alt="">
                    </div>
                </div>
                <!-- 考生信息 -->
                <layerUserInfo @userInfoToggle="myUserInfoToggle" v-show="isShowUserInfo"/>
                <!-- 系数表 -->
                <coefficientsTable v-if="isShowCoefficientsTable" @close="closeCoefficientsTable" style="position:absolute;z-index:10;top:140px;"></coefficientsTable>
            </div>
        </div>
        <!-- 休息片刻 -->
        <div class="parseBox" @click="parseImgToggle" v-show="isShowParseImg" style="user-select:none">
            <img src="../../static/images/examPause.jpg">
        </div>
        <!-- 试题列表 -->
        <div class="examList" v-show="isShowExamList&&!examListState">
            <div class="header">
                <img src="../../static/images/sub-select.png" alt="">
                <div class="right">
                    <div class="examTime">
                        考试剩余时间：
                    </div>
                    <div class="number">
                        机号：<span class="r-c">1</span>
                    </div>
                </div>
            </div>
            <div class="select-wrap">
                <div class="box-wrap clearfix">
                    <p class="ta-r state-intro"><span><i class="icon-state-yes"></i>已答试题</span><span><i class="icon-state-no"></i>未答试题</span><span><i class="icon-state-mark"></i>标记试题</span></p>
                    <dl v-for="type in typeList">
                      <dt>{{qusTypeToName(type+'')}}</dt>
                      <dd id="datika-item-wrap" class="am-margin-top-0"  >
                          <!--判断已做 yes -->
                          <a href="javascript:void(0);" v-for="(qus,num) in questionList" v-if="qus.type == type" :class="{'mark':qus.marked,'yes':qus.finished}" @click="goCurrentQuestion(num)">
                              {{qus.num}}
                          </a>                  
                      </dd>
                    </dl>
                     
                </div>
            </div>
            <div class="bottom-btn">
                <img @click="goExamListState" style="margin-right: 10px" src="../../static/images/btn-status.png" alt="">
                <img @click="backExam" src="../../static/images/btn-goback.png" alt="">
                <img style="margin-left: 10px;margin-right: 20px;" src="../../static/images/btn-end.png" alt="" @click="submitPaper">
            </div>
        </div>
        
        <!-- 作答情况统计 -->
        <answerStatistics ref="answerStatistics" v-show="examListState" :qusList="questionList" :typeList="typeList" @close="backExamList"></answerStatistics>
        <!-- 结束考试 -->
        <div class="endExam" v-if="isEndExam">
            <div class="bg-light">
                <img src="../../static/images/logo.png" alt="中国注册会计师协会" class="logo">
                <div class="pc-number">
                    机号<span>1</span>
                </div>
                <h1 class="ta-c h1-large" style="padding-top: 306px; text-indent: -8px;">
                    <img src="../../static/images/h1-end.png" alt=""></h1>
                <button @click="goResult" class="am-btn am-btn-secondary btn-radius am-btn-xl doWell" style="position:absolute;top:416px;left:445px;cursor:pointer;">查看答案</button>
            </div>
        </div>
        <!-- 保存进度 -->
        <el-dialog
            title="保存进度"
            :visible.sync="isShowSaveProgressDialog"
            width="30%"
            :before-close="closeSaveProgressDialog">
            <input type="text" placeholder="给进度起个名字吧" v-model="progressName" style="width:100%;height:36px;">
            <span slot="footer" class="dialog-footer">
                <el-button @click="isShowSaveProgressDialog = false">取 消</el-button>
                <el-button type="primary" @click="submitSaveProgress">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import Calculator from "../../components/calculator";
import Countdown from "../../components/countdown";
import layerUserInfo from "../../components/layerUserInfo";
import VueUeditorWrap from "vue-ueditor-wrap"; // ES6 Module
// import Ueditor from '@/components/Ueditor.vue';
import analysisDialog from "@/components/analysisDialog.vue";
import answerStatistics from "@/components/exam/answerStatistics.vue";
import coefficientsTable from "@/components/exam/coefficientsTable.vue";
import { setTimeout } from "timers";
import { submitExam, saveProgress, getExampaperProgress, getExamPaper} from "@/api/exam.js"
export default {
  components: {
    Calculator,
    Countdown,
    layerUserInfo,
    VueUeditorWrap,
    analysisDialog,
    answerStatistics,
    coefficientsTable
  },
  data() {
    return {
      isContenteditable: false,
      isShowCoefficientsTable: false, //是否显示系数表弹窗
      textAreaHeight: "300",
      textBoxHeight: "247",
      questionDescribeList: [
        {
          name: "单项选择题",
          describe:
            "每小题只有一个正确答案，请从每小题的备选答案中选出一个你认为最正确的答案，用鼠标点击相应的选项。",
          type: 0
        },
        {
          name: "多选题",
          describe:
            "每小题均有多个正确答案，请从每小题的备选答案中选出你认为正确的答案，用鼠标点击相应的选项。每小题所有答案选择正确的得分，不答、错答、漏答均不得分。",
          type: 1
        },
        {
          name: "简答题",
          describe:
            "其中一道小题可以选用中文或英文解答，请仔细阅读答题要求。如使用英文解答，须全部使用英文，答题正确的，增加5分。",
          type: 4
        },
        {
          name: "计算分析题",
          describe:
            "其中一道小题可以选用中文或英文解答，请仔细阅读答题要求。如使用英文解答，须全部使用英文，答题正确的，增加5分。涉及计算的，要求列出计算步骤，否则不得分，除非题目特别说明不需要列出计算过程。",
          type: 5
        },

        {
          name: "计算问答题",
          describe: "",
          type: 7
        },
        {
          name: "案例分析题",
          describe:
            "其中一道小题可以选用中文或英文解答，请仔细阅读答题要求。如使用英文解答，须全部使用英文，答题正确的，增加5分。",
          type: 8
        },
        {
          name: "综合题",
          describe:
            "涉及计算的，要求列出计算步骤，否则不得分，除非题目特别说明不需要列出计算过程。",
          type: 6
        }
      ],
      currentQuesNum: 0, //当前题介绍数字
      currentType: 0, //当前题类型
      progressName: "", //进度名字
      isShowSaveProgressDialog: false, //是否显示保存进度
      paperID: "", //试卷id
      examStartTime: "", //试卷提交开始时间
      isEndExam: false, //是否结束考试
      answerList: {
        //答案数组
        // radio:[],
        // multiples:[],
        // calculations:[],
        // comprehensives:[],
        questions: []
      },
      formulaShowIdx: 0, //当前公式活跃tab
      isFormulaBtnShow: false, //是否显示公式按钮
      isTableBtnShow: false, //是否显示插入表格按钮
      isShowCoefficientsTableBtn:
        localStorage.getItem("categoryName") == "财管",
      analysisDialogVisible: false, //答题解析
      //富文本
      defaultMsg1: "",
      ueditor1: "ueditor1",
      config1: {
        serverUrl: "", //这个编辑器上传内容的存储地址，这个地址需要问后端要
        toolbars: [
          ["inserttable", "deletetable"] // ['fullscreen','bold',, 'italic', 'underline','removeformat','insertimage','custombtn','complexformulas']
        ],
        autoHeightEnabled: false,
        autoFloatEnabled: false, //不允许滚动时固定在顶部
        initialContent: "请输入内容...", //初始化编辑器的内容,也可以通过textarea/script给值，看官网例子
        autoClearinitialContent: true, //是否自动清除编辑器初始内容，注意：如果focus属性设置为true,这个也为真，那么编辑器一上来就会触发导致初始化的内容看不到了
        initialFrameWidth: null,
        initialFrameHeight: 250,
        BaseUrl: "",
        UEDITOR_HOME_URL: "static/ueditor/",
        zIndex: "100" //修改编辑器层级
      },
      isShowZoomBigBtn: "inline-block", //是否显示放大窗口按钮
      isShowRecoverBtn: "none", //是否显示恢复窗口
      zoomBigHeight: "270px", //放大后题干高度
      toolbar1: [["fullscreen", "source", "undo", "redo", "bold"]],
      currentQuestion: 1, //当前第几题
      questionList: [
        //题列表
      ],
      isShowCalculator: false, //计算器显示隐藏
      startTime: 0,
      endTime: 10800000, //倒计时时间
      isShowUserInfo: false, //考生信息
      isShowParseImg: false, //休息片刻
      reFresh: false,
      // msg: '<h2><img />Vue + UEditor + v-model双向绑定</h2>',
      // myConfig: {
      //     // 编辑器不自动被内容撑高
      //     autoHeightEnaDled: false,
      //     // 初始容器高度
      //     initialFrameHeight: 240,
      //     // 初始容器宽度
      //     initialFrameWidth: '100%',
      //     // 上传文件接口（这个地址是我为了方便各位体验文件上传功能搭建的临时接口，请勿在生产环境使用！！！）
      //     serverUrl: '',
      //     // UEditor 资源文件的存放路径，如果你使用的是 vue-cli 生成的项目，通常不需要设置该选项，vue-ueditor-wrap 会自动处理常见的情况，如果需要特殊配置，参考下方的常见问题2
      //     UEDITOR_HOME_URL: '/static/UEditor/'
      // },
      isShowExamList: false, //是否显示提卡
      examListState: false, //是否显示作答情况
      copyTxtContent: "", //复制文本
      typeList: [], //题类型
      numberList: ["一", "二", "三", "四"] //数字转汉子数组
    };
  },
  created() {
    let examStartTime = new Date();
    this.examStartTime = this.crtTimeFtt(examStartTime);
    this.paperID = this.$route.query.id; //记录试卷id
    const loading = this.$loading({
      lock: true,
      text: "Loading",
      spinner: "el-icon-loading",
      background: "rgba(0, 0, 0, 0.7)"
    });
    //获取进度试题
    if (this.$route.query.progressID) {
      // 获取试卷试题
      getExampaperProgress(this.$route.query.progressID).then(res => {
          if (res.code != 200) {
            this.$message({
              message: res.msg,
              type: "warning"
            });
            loading.close();
          } else {
            let typeList = [0, 1]; //记录类型都有哪些
            loading.close();
            let questionList = [];
            // 单选处理
            res.data.radio.forEach((qus, idx) => {
              qus.num = idx + 1;
            });
            questionList = questionList.concat(res.data.radio);
            // 多选处理
            res.data.multiples.forEach((qus, idx) => {
              qus.num = idx + 1;
            });
            questionList = questionList.concat(res.data.multiples);
            // 计算分析处理
            if (res.data.calculations && res.data.calculations.length > 0) {
              res.data.calculations.forEach(item => {
                item.activeSubQus = 0;
              });
              typeList.push(5);
            }
            res.data.calculations.forEach((qus, idx) => {
              qus.num = idx + 1;
            });
            questionList = questionList.concat(res.data.calculations);

            // 案例分析题
            if (res.data.caseStudies && res.data.caseStudies.length > 0) {
              res.data.caseStudies.forEach(item => {
                item.activeSubQus = 0;
              });
              typeList.push(8);
            }
            if (res.data.caseStudies) {
              res.data.caseStudies.forEach((qus, idx) => {
                qus.num = idx + 1;
              });
            }
            questionList = questionList.concat(res.data.caseStudies);
            // 计算问答题
            if (
              res.data.calculationAnswers &&
              res.data.calculationAnswers.length > 0
            ) {
              res.data.calculationAnswers.forEach(item => {
                item.activeSubQus = 0;
              });
              typeList.push(7);
            }
            if (res.data.calculationAnswers) {
              res.data.calculationAnswers.forEach((qus, idx) => {
                qus.num = idx + 1;
              });
            }
            questionList = questionList.concat(res.data.calculationAnswers);
            // 简答题
            if (res.data.showAnswers && res.data.showAnswers.length > 0) {
              res.data.showAnswers.forEach(item => {
                item.activeSubQus = 0;
              });
              typeList.push(4);
            }
            if (res.data.showAnswers) {
              res.data.showAnswers.forEach((qus, idx) => {
                qus.num = idx + 1;
              });
            }
            // 综合题
            if (res.data.comprehensives && res.data.comprehensives.length > 0) {
              res.data.comprehensives.forEach(item => {
                item.activeSubQus = 0;
              });
              typeList.push(6);
            }
            if (res.data.comprehensives) {
              res.data.comprehensives.forEach((qus, idx) => {
                qus.num = idx + 1;
              });
            }
            questionList = questionList.concat(res.data.comprehensives);
            this.typeList = typeList;
            questionList = questionList.concat(res.data.showAnswers);
            let qus = questionList[0];
            qus.browseCount = 1;
            questionList.splice(0, 1, qus);
            this.questionList = questionList;
            // 初试时间
            if (res.data.time) {
              this.endTime = res.data.time * 60 * 1000;
              this.reFresh = false;
              this.reFresh = true;
            }
            // 初始题型
            this.currentType = questionList[0].type;
            // 处理载入答案
            questionList.forEach(qus => {
              if (qus.userAnswer) {
                if (qus.type == 1) {
                  this.answerList.questions.push({
                    questionId: qus.questionId,
                    answers: qus.userAnswer.splice("")
                  });
                } else {
                  this.answerList.questions.push({
                    questionId: qus.questionId,
                    answers: [qus.userAnswer]
                  });
                }
              }
            });
            //展示part
            // 选项排序
            this.questionList.forEach(qus => {
              if (qus.type == 0 || qus.type == 1) {
                qus.options = qus.options.sort((a, b) => {
                  if (a["optionName"] > b["optionName"]) return 1;
                  else return -1;
                });
              }
            });
            // 初试时间
            if (res.data.duration) {
              this.endTime = res.data.duration*1000
              this.reFresh = false;
              this.reFresh = true;
            }
            
          }
        })

    } else {
      // 获取试卷试题
      getExamPaper(this.paperID).then(res => {
        if (res.code != 200) {
          this.$message({
            message: res.msg,
            type: "warning"
          });
          loading.close();
        } else {
          loading.close();
          let typeList = [0, 1]; //记录类型都有哪些
          let questionList = [];
          // 单选处理
          res.data.radio.forEach((qus, idx) => {
            qus.num = idx + 1;
          });
          questionList = questionList.concat(res.data.radio);
          // 多选处理
          res.data.multiples.forEach((qus, idx) => {
            qus.num = idx + 1;
          });
          questionList = questionList.concat(res.data.multiples);
          // 计算分析处理
          if (res.data.calculations && res.data.calculations.length > 0) {
            res.data.calculations.forEach(item => {
              item.activeSubQus = 0;
            });
            typeList.push(5);
          }
          res.data.calculations.forEach((qus, idx) => {
            qus.num = idx + 1;
          });
          questionList = questionList.concat(res.data.calculations);

          // 案例分析题
          if (res.data.caseStudies && res.data.caseStudies.length > 0) {
            res.data.caseStudies.forEach(item => {
              item.activeSubQus = 0;
            });
            typeList.push(8);
          }
          if (res.data.caseStudies) {
            res.data.caseStudies.forEach((qus, idx) => {
              qus.num = idx + 1;
            });
          }
          questionList = questionList.concat(res.data.caseStudies);
          // 计算问答题
          if (
            res.data.calculationAnswers &&
            res.data.calculationAnswers.length > 0
          ) {
            res.data.calculationAnswers.forEach(item => {
              item.activeSubQus = 0;
            });
            typeList.push(7);
          }
          if (res.data.calculationAnswers) {
            res.data.calculationAnswers.forEach((qus, idx) => {
              qus.num = idx + 1;
            });
          }
          questionList = questionList.concat(res.data.calculationAnswers);
          // 简答题
          if (res.data.showAnswers && res.data.showAnswers.length > 0) {
            res.data.showAnswers.forEach(item => {
              item.activeSubQus = 0;
            });
            typeList.push(4);
          }
          if (res.data.showAnswers) {
            res.data.showAnswers.forEach((qus, idx) => {
              qus.num = idx + 1;
            });
          }
          questionList = questionList.concat(res.data.showAnswers);
          // 综合题
          if (res.data.comprehensives && res.data.comprehensives.length > 0) {
            res.data.comprehensives.forEach(item => {
              item.activeSubQus = 0;
            });
            typeList.push(6);
          }
          if (res.data.comprehensives) {
            res.data.comprehensives.forEach((qus, idx) => {
              qus.num = idx + 1;
            });
          }
          questionList = questionList.concat(res.data.comprehensives);
          this.typeList = typeList;
          // 初试时间
          if (res.data.time) {
            this.endTime = res.data.time * 60 * 1000;
            this.reFresh = false;
            this.reFresh = true;
          }
          let qus = questionList[0];
          qus.browseCount = 1;
          questionList.splice(0, 1, qus);
          this.questionList = questionList;
          // 选项排序
          this.questionList.forEach(qus => {
            if (qus.type == 0 || qus.type == 1) {
              qus.options = qus.options.sort((a, b) => {
                if (a["optionName"] > b["optionName"]) return 1;
                else return -1;
              });
            }
          });
          // 切换题型
          let type = this.$route.query.type; //判断跳转题型
          this.currentType = type;
          console.log(type);
          if (type != 0) {
            for (let i = 0; i < this.questionList.length; i++) {
              if (this.questionList[i].type == type) {
                this.currentQuestion = i + 1;
                break;
              }
            }
          }
        }
      });
    }
  },

  methods: {
    //选中标记和取消标记
    makeColor(colour) {
      this.isContenteditable = true;
      setTimeout(() => {
        if (window.getSelection) {
          // IE9 and non-IE
          try {
            if (!document.execCommand("BackColor", false, colour)) {
              this.makeEditableAndHighlight(colour);
            }
            this.isContenteditable = false;
          } catch (ex) {
            console.log(ex);
            this.makeEditableAndHighlight(colour);
          }
        } else if (document.selection && document.selection.createRange) {
          // IE <= 8 case
          range = document.selection.createRange();
          range.execCommand("BackColor", false, colour);
        }
      }, 100);
    },
    makeEditableAndHighlight(colour) {
      var range,
        sel = window.getSelection();
      if (sel.rangeCount && sel.getRangeAt) {
        range = sel.getRangeAt(0);
      }
      if (range) {
        sel.removeAllRanges();
        sel.addRange(range);
      }
      document.execCommand("BackColor", false, colour);
      if (!document.execCommand("HiliteColor", false, colour)) {
        console.log("color");
        document.execCommand("BackColor", false, colour);
      }

      this.isContenteditable = false;
    },
    clickMake() {
      this.makeColor("yellow");
    },
    clickUnMake() {
      this.makeColor("white");
    },
    closeCoefficientsTable() {
      //关闭系数表弹窗
      this.isShowCoefficientsTable = false;
    },
    openCoefficientsTable() {
      //打开系数表弹窗
      this.isShowCoefficientsTable = true;
    },
    clearContent(content) {
      //清除空标签
      var reg = /<[^>]*>[\s]*<\/[^>]*>/g;
      return content.replace(reg, "");
      str = str.replace(this.reg, "");
      if (this.reg.test(str)) {
        clearContent(str);
      } else {
        return str;
      }
    },
    qusTypeToName(type) {
      //题型转为类型
      switch (type) {
        case "0":
          return "单项选择题";
          break;
        case "1":
          return "多项选择题";
          break;
        case "4":
          return "简答题";
          break;
        case "5":
          return "计算分析题";
          break;
        case "6":
          return "综合题";
          break;
        case "7":
          return "计算问答题";
          break;
        case "8":
          return "案例分析题";
          break;
      }
    },
    numToHanzi(num) {
      //数字转汉字
      return this.numberList[num];
      // switch(num){
      //   case 0:
      //     return '一';break;
      //   case 1:
      //     return '二';break;
      //   case 2:
      //     return '三';break;
      //   case 3:
      //     return '四';break;
      // }
    },
    tipCommingsoon() {
      layer.msg("正在开发，敬请期待！");
    },
    crtTimeFtt(val) {
      //格式化时间
      if (val != null) {
        var date = new Date(val);
        return (
          this.myformatter(date.getFullYear()) +
          "-" +
          this.myformatter(date.getMonth() + 1) +
          "-" +
          this.myformatter(date.getDate()) +
          " " +
          this.myformatter(date.getHours()) +
          ":" +
          this.myformatter(date.getMinutes()) +
          ":" +
          this.myformatter(date.getSeconds())
        );
      }
    },
    myformatter(val) {
      //补位
      if (val < 10) {
        return "0" + val;
      } else {
        return val;
      }
    },
    goResult() {
      //到查看试卷解析界面
      this.$router.push({
        path: "result",
        query: {
          paperID: this.paperID,
          paperRecordId: this.paperRecordId
        }
      });
    },
    submitPaper() {
      //提交试题
      let duration = this.$refs.Countdown.duration; //考试时长
      let answerList = this.answerList;
      answerList.duration = duration;
      answerList.paperId = this.paperID;
      answerList.startTime = this.examStartTime;
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      submitExam(answerList).then(res=>{
        loading.close();
        if (res.code != 200) {
          this.$message({
            message: res.msg,
            type: "warning"
          });
        } else {
          this.$message({
            message: "提交成功",
            type: "success"
          });
          this.paperRecordId = res.data.paperRecordId;
          this.isEndExam = true;
        }
      })
      // this.$post("/api/v1/exams", answerList).then(res => {
      //   loading.close();
      //   if (res.code != 200) {
      //     this.$message({
      //       message: res.msg,
      //       type: "warning"
      //     });
      //   } else {
      //     this.$message({
      //       message: "提交成功",
      //       type: "success"
      //     });
      //     this.paperRecordId = res.data.paperRecordId;
      //     this.isEndExam = true;
      //   }
      // });
    },
    submitSaveProgress() {
      //保存进度发送
      let duration = this.$refs.Countdown.duration; //考试时长
      let answerList = this.answerList;
      let progressData = {};
      progressData.name = this.progressName;
      progressData.paperId = this.paperID;
      progressData.questionProgresses = answerList.questions;
      progressData.duration = this.endTime / 1000 - duration;
      saveProgress(progressData).then(res=>{
        if (res.code != 200) {
          this.$message({
            message: res.msg,
            type: "warning"
          });
        } else {
          this.$message({
            message: "保存成功",
            type: "success"
          });
          this.progressName = "";
        }
      })
      // this.$post("/api/v1/paper_progress", progressData).then(res => {
      //   if (res.code != 200) {
      //     this.$message({
      //       message: res.msg,
      //       type: "warning"
      //     });
      //   } else {
      //     this.$message({
      //       message: "保存成功",
      //       type: "success"
      //     });
      //     this.progressName = "";
      //   }
      // });
      this.isShowSaveProgressDialog = false;
    },
    closeSaveProgressDialog() {},
    savePaperProgress() {
      //保存进度dialpg
      this.$confirm('保存进度不会进行判卷，请知晓！点击"确定"后继续')
        .then(_ => {
          this.isShowSaveProgressDialog = true;
        })
        .catch(_ => {});
    },
    addTable(num) {
      //插入表格
      // console.log(this.range.startContainer)
      // console.log(this.range.startContainer.className)
      if (this.range.startContainer.tagName == "TD") {
        this.$message("不能在表格里面创建表格");
        return;
      } else if (
        this.range.startContainer.className != "txtArea" &&
        this.range.startContainer.className != undefined
      ) {
        this.$message("此处不能插入表格");
        return;
      }
      if (this.range == null) {
        this.$message("请选取插入地点");
        return;
      }
      let itemBox = document.createElement("div");
      var html =
        '<div " class="Matrix" style="margin:10px 0;width: _width_px;"><table style="width:100%;border-collapse: collapse;" class="table_Matrix"><tbody>_tr_</tbody></table></div>&nbsp;';
      var trs = "";
      for (var i = 0; i < num; i++) {
        var tds = "";
        for (var j = 0; j < num; j++)
          tds +=
            '<td  contentEditable="true" style="width: 300px;height:100%;border:1px solid #999;text-align:left;cursor: text;"></td>';
        trs += '<tr style="height: 100px;">' + tds + "</tr>";
      }

      html = html.replace(/_tr_/g, trs).replace(/_width_/g, num * 300);
      itemBox.innerHTML = html;
      itemBox.innerHTML += "&nbsp;";
      this.range.insertNode(itemBox); //在焦点插入节点
      this.isTableBtnShow = false;
    },
    addFraction(a, b) {
      //插入公式符号
      let latex = ""; //哪种符号公式
      if (a == 0) {
        switch (b) {
          case 0:
            latex = "\\frac{}{}";
            break;
          case 1:
            latex = "\\^{}/_{}";
            break;
          case 2:
            latex = "x^{}";
            break;
          case 3:
            latex = "x_{}";
            break;
          case 4:
            latex = "x_{}^{}";
            break;
          case 5:
            latex = "\\bar{}";
            break;
          case 6:
            latex = "\\sqrt{}";
            break;
          case 7:
            latex = "\\nthroot3{}";
            break;
          case 8:
            latex = "\\nthroot{}{}";
            break;
          case 9:
            latex = "\\sum^{}_{}"; //根号
            break;
          case 10:
            latex = "\\sum0";
            break;
          case 11:
            latex = "\\log_{}\\left(\\right)";
            break;
          case 12:
            latex = "\\ln{}";
            break;
        }
      } else if (a == 1) {
        switch (b) {
          case 0:
            latex = "+";
            break;
          case 1:
            latex = "-";
            break;
          case 2:
            latex = "\\pm";
            break;
          case 3:
            latex = "\\times";
            break;
          case 4:
            latex = "\\ast";
            break;
          case 5:
            latex = "\\div";
            break;
          case 6:
            latex = "/";
            break;
          case 7:
            latex = "\\infty";
            break;
          case 8:
            latex = "\\partial";
            break;
          case 9:
            latex = "\\bigtriangleup"; //根号
            break;
          case 10:
            latex = "=";
            break;
          case 11:
            latex = "\\ne";
            break;
          case 12:
            latex = "\\approx";
            break;
          case 13:
            latex = ">";
            break;
          case 14:
            latex = "<";
            break;
          case 15:
            latex = "\\ge";
            break;
          case 16:
            latex = "\\le";
            break;
        }
      } else if (a == 2) {
        switch (b) {
          case 0:
            latex = "\\alpha";
            break;
          case 1:
            latex = "\\beta";
            break;
          case 2:
            latex = "\\gamma";
            break;
          case 3:
            latex = "\\delta";
            break;
          case 4:
            latex = "\\varepsilon";
            break;
          case 5:
            latex = "\\varphi";
            break;
          case 6:
            latex = "\\lambda";
            break;
          case 7:
            latex = "\\mu";
            break;
          case 8:
            latex = "\\rho";
            break;
          case 9:
            latex = "\\sigma"; //根号
            break;
          case 10:
            latex = "\\omega";
            break;
        }
      }
      if (this.range == null) {
        this.$message("请选取插入地点");
        return;
      }
      let itemBox = document.createElement("text");
      var text = document.createElement("text");
      // text.style="min-width:20px;min-height:30px;"
      text.style.minWidth = "20px";
      text.style.minHeight = "30px";
      var mathField = this.MQ.MathField(text, []);
      mathField.latex(latex); // Renders the given LaTeX in the MathQuill field
      mathField.latex();
      itemBox.appendChild(text);
      // itemBox.append(text);
      itemBox.innerHTML += "&nbsp;";
      // // console.log(itemBox);
      this.range.insertNode(itemBox); //在焦点插入节点
      this.isFormulaBtnShow = false;
    },
    txtAreaChange(e, subQus) {
      //富文本内容变化   计算分析题、简答题
      // console.log(subQus)
      let _this = this;
      let qus = _this.questionList[_this.currentQuestion - 1];
      let questionId = subQus.questionId;
      if (e.target.innerHTML.length > 0) {
        qus.finished = true;
        let isExist = false;
        _this.answerList.questions.forEach((qus, idx) => {
          if (qus.questionId == questionId) {
            isExist = true;
            qus.answers = [e.target.innerHTML];
          }
        });
        if (!isExist) {
          _this.answerList.questions.push({
            questionId,
            answers: [e.target.innerHTML]
          });
        }
      } else {
        // 是否作答处理
        let qus = _this.questionList[_this.currentQuestion - 1];
        _this.answerList.questions.forEach((qus, idx) => {
          if (qus.questionId == questionId) {
            _this.answerList.questions.splice(idx, 1);
          }
        });
      }
      _this.questionList.splice(_this.currentQuestion - 1, 1, qus);
    },
    getRange() {
      //找到焦点
      this.range = window.getSelection().getRangeAt(0); //找到焦点位置
    },
    changeFormulaShowIdx(num) {
      //改变公式显示tab
      this.formulaShowIdx = num;
    },
    openAnalysisDialog() {
      //打开分析dialog
      this.analysisDialogVisible = true;
    },
    closeAnalysisDialog() {
      //关闭解析窗口
      this.analysisDialogVisible = false;
    },
    pasteContent() {
      //粘贴
      let txt = document.createElement("text");
      if (this.copyTxtContent == "") {
        this.$message("请先复制文本");
        return;
      } else if (this.range == null) {
        this.$message("请选取插入地点");
        return;
      }
      txt.innerHTML = this.copyTxtContent;
      this.range.insertNode(txt);
    },
    copyContent() {
      //复制
      this.copyTxtContent = window.getSelection().toString();
    },
    cutContent() {
      this.copyTxtContent = window.getSelection().toString();
      document.execCommand("cut");
    },
    choosechildren(index) {
      //计算题简答题修改小题
      this.range = null; //清除插入点
      let qus = this.questionList[this.currentQuestion - 1];
      qus.activeSubQus = index;
      // this.questionList.splice(index  ,1,qus)
      this.$set(this.questionList, this.currentQuestion - 1, qus);
      // this.questionList[this.currentQuestion-1].activeSubQus = index
      // this.$forceUpdate();
    },
    goCurrentQuestion(num) {
      //答题卡跳转到答题页面
      this.currentQuestion = num + 1;
      this.isShowExamList = false;
      this.examListState = false;
      this.currentType = this.questionList[this.currentQuestion - 1].type;
      if (this.questionList[this.currentQuestion - 1].browseCount) {
        this.questionList[this.currentQuestion - 1].browseCount++;
      } else {
        this.questionList[this.currentQuestion - 1].browseCount = 1;
      }
    },
    closeCalculator() {
      //关闭计算器
      this.isShowCalculator = false;
    },
    zoomBig(temp) {
      let _this = this;
      //放大缩小窗口
      if (temp == 1 && _this.zoomBigHeight == "270px") {
        //放大1
        _this.zoomBigHeight = "548px";
        _this.isShowRecoverBtn = "inline-block";
        _this.isShowZoomBigBtn = "none";
      } else if (
        (temp == 0 && _this.zoomBigHeight == "548px") ||
        (temp == 4 && _this.zoomBigHeight == "548px")
      ) {
        //缩小1
        _this.zoomBigHeight = "270px";
        _this.isShowRecoverBtn = "none";
        _this.isShowZoomBigBtn = "inline-block";
      } else if (temp == 3 && _this.zoomBigHeight == "270px") {
        //放大2
        _this.zoomBigHeight = "6px";
        _this.isShowRecoverBtn = "inline-block";
        _this.isShowZoomBigBtn = "none";
        _this.textAreaHeight = "520";
        _this.textBoxHeight = "400";
      } else if (
        (temp == 0 && _this.zoomBigHeight == "6px") ||
        (temp == 4 && _this.zoomBigHeight == "6px")
      ) {
        //缩小2
        _this.zoomBigHeight = "270px";
        _this.isShowRecoverBtn = "none";
        _this.isShowZoomBigBtn = "inline-block";
        _this.textAreaHeight = "300";
        _this.textBoxHeight = "247";
      }
    },
    markQuestion(e) {
      //标记本题
      let val = e.target.checked;
      let questions = this.questionList;
      questions.forEach((question, index) => {
        if (index + 1 == this.currentQuestion) {
          question.marked = val;
        }
      });
    },
    oneChoiceChoose(questionId, optionId) {
      //单选选择
      // console.log(optionId)
      let isExist = false;
      this.answerList.questions.forEach((qus, idx) => {
        if (qus.questionId == questionId) {
          isExist = true;
          qus.answers = [optionId];
        }
      });
      if (!isExist) {
        this.answerList.questions.push({
          questionId,
          answers: [optionId]
        });
      }

      this.questionList.forEach((qus, idx) => {
        if (idx == this.currentQuestion - 1) {
          qus.finished = true;
          this.$set(this.questionList, this.currentQuestion - 1, qus);
        }
      });
    },
    multipleChoiceChoose(questionId, option) {
      //多选
      let isExist = false;
      let answers = [];
      // console.log(option)
      this.answerList.questions.forEach((qus, idx) => {
        if (qus.questionId == questionId) {
          isExist = true;
          if (qus.answers.indexOf(option) == -1) {
            qus.answers.push(option);
            answers = qus.answers;
          } else {
            qus.answers.splice(qus.answers.indexOf(option), 1);
            answers = qus.answers;
          }
        }
      });
      if (!isExist) {
        this.answerList.questions.push({
          questionId,
          answers: [option]
        });
        answers = [option];
      }

      if (answers.length > 0) {
        this.questionList.forEach((qus, idx) => {
          //列表处理
          if (idx == this.currentQuestion - 1) {
            qus.finished = true;
            this.$set(this.questionList, this.currentQuestion - 1, qus);
          }
        });
      } else {
        this.questionList.forEach((qus, idx) => {
          //列表处理
          if (idx == this.currentQuestion - 1) {
            qus.finished = false;
            this.$set(this.questionList, this.currentQuestion - 1, qus);
          }
        });
      }
    },
    goPrevQuestion() {
      //上一题
      this.range = null; //清除插入点
      if (this.currentQuestion <= 1) {
        this.$message("这是第一题");
        return;
      }
      this.currentQuestion--;
      let qus = this.questionList[this.currentQuestion - 1];
      // 处理题介绍（一、二、三、四）
      if (this.currentType != qus.type) {
        this.currentQuesNum--;
      }
      // 处理题的类型变化
      this.currentType = qus.type;
      if (qus.browseCount && qus.browseCount >= 1) {
        qus.browseCount++;
      } else {
        qus.browseCount = 1;
      }
      this.questionList.splice(this.currentQuestion - 1, qus);
      //统计已答
      let hasFinishedCount = 0;
      this.questionList.forEach(qus => {
        if (qus.finished) {
          hasFinishedCount++;
        }
      });
      // this.$answerStatistics.makedCount = hasFinishedCount;
      this.$refs.answerStatistics.makedCount = hasFinishedCount;
      this.$refs.answerStatistics.unMakedCount =
        this.questionList.length - hasFinishedCount;
    },
    goNextQuestion() {
      //下一题
      this.range = null; //清除插入点
      if (this.currentQuestion >= this.questionList.length) {
        this.$message("这是最后一题");
        return;
      }
      this.currentQuestion++;
      let qus = this.questionList[this.currentQuestion - 1];
      // 处理题介绍（一、二、三、四）
      if (this.currentType != qus.type) {
        this.currentQuesNum++;
      }
      // 处理题的类型变化
      this.currentType = qus.type;

      if (qus.browseCount && qus.browseCount >= 1) {
        qus.browseCount++;
      } else {
        qus.browseCount = 1;
      }
      this.questionList.splice(this.currentQuestion - 1, 1, qus);
      //统计已答
      let hasFinishedCount = 0;
      this.questionList.forEach(qus => {
        if (qus.finished) {
          hasFinishedCount++;
        }
      });
      this.$refs.answerStatistics.makedCount = hasFinishedCount;
      this.$refs.answerStatistics.unMakedCount =
        this.questionList.length - hasFinishedCount;
    },
    goExamListState() {
      //显示作答情况
      this.examListState = true;
    },
    backExamList() {
      //返回答题列表
      this.examListState = false;
    },
    backExam() {
      //返回继续答题
      this.isShowExamList = false;
    },
    goExamList() {
      //显示答题列表
      this.isShowExamList = true;
    },
    close() {
      //关闭计算器
      this.isShowCalculator = false;
    },
    myUserInfoToggle() {
      //查看用户信息
      this.isShowUserInfo = !this.isShowUserInfo;
    },
    parseImgToggle() {
      //暂停
      if (this.isShowParseImg) {
        this.$refs.Countdown.start();
      } else {
        this.$refs.Countdown.parse();
      }
      this.isShowParseImg = !this.isShowParseImg;
    },
    add() {
      //test
      this.Editor.InsertWrite("&#39;+&#39;", false);
      return false;
    },
    ready(editorInstance) {
      this.Editor = editorInstance;
      // console.log(`编辑器实例${editorInstance.key}: `, editorInstance)
    }
  },
  watch: {
    $route() {
      let type = this.$route.query.type; //判断跳转题型
      // this.questionList.forEach((qus, num) => {
      //   if (qus.type == type) {
      //     this.currentQuestion = num + 1;
      //     return;
      //   }
      // });
      this.currentType = type;
      for (let i = 0; i < this.questionList.length; i++) {
        if (this.questionList[i].type == type) {
          this.currentQuestion = i + 1;
          break;
        }
      }
    }
  },
  mounted() {
    let _this = this;
    this.MQ = MathQuill.getInterface(2);
    window.onkeydown = function(e) {
      //刷新页面提示
      if (e.keyCode == 116) {
        e.preventDefault();
        _this
          .$confirm(
            "刷新页面将会导致数据全部丢失，您确定要执行此操作吗",
            "提示",
            {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning"
            }
          )
          .then(() => {
            location.reload();
          })
          .catch(() => {
            _this.$message({
              type: "info",
              message: "已取消刷新"
            });
          });
      }
    };
  }
};
</script>
<style lang="scss">
.exam {
  :focus {
    outline: -webkit-focus-ring-color auto 1px;
  }

  .examList {
    //试题列表
    font-size: 14px;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    padding: 0 8px;
    width: 1022px;
    border: 1px solid #c1cee3;
    height: 766px;
    background: url(../../static/images/bg-2.jpg);
    .header {
      width: 100%;
      text-align: center;
      font-weight: bold;
      padding-top: 10px;
      .right {
        position: absolute;
        right: 10px;
        top: 36px;
        display: flex;
        font-size: 14px;
        align-items: flex-end;
        .examTime {
          padding-right: 80px;
          display: flex;
        }
      }
    }
    // 试题列表
    .select-wrap {
      margin-top: 10px;
      margin-bottom: 20px;
      a.mark {
        //标记active
        background-image: url(../../static/images/icon-mark.png);
        background-position: top right;
        background-repeat: no-repeat;
      }
      a.yes {
        background-color: #349802 !important;
        color: #fff !important;
      }
      .icon-state-yes,
      .icon-state-no,
      .icon-state-mark {
        width: 14px;
        height: 14px;
        display: inline-block;
        vertical-align: middle;
        margin-right: 3px;
      }

      .icon-state-yes {
        border: 1px solid #ccc;
        background-color: #349802;
      }
      .icon-state-mark {
        background: url(../../static/images/icon-mark.png) no-repeat;
      }
      .icon-state-no {
        border: 1px solid #ccc;
        background-color: #d9e5f5;
      }
      p span {
        display: inline-block;
        margin-left: 10px;
      }
      .box-wrap {
        background-color: #f5fafe;
        width: 940px;
        border: 1px solid #c6def6;
        border-radius: 10px;
        box-shadow: 3px 3px 10px #666;
        margin: 0 auto;
        padding-bottom: 20px;
        -webkit-overflow-scrolling: touch;
        overflow-y: auto;
        border: 1px solid #d7e8fa;
        width: 980px;
        max-height: 620px;
        min-height: 300px;
        .state-intro {
          display: flex;
          justify-content: flex-end;
          padding-right: 70px;
          margin: 20px 0;
        }
        dl {
          margin: 0;
          border-bottom: 1px solid #ebf2fc;
          padding: 15px 0px 15px 60px;
          dt {
            display: inline-block;
            float: left;
            width: 130px;
            padding-right: 20px;
            text-align: right;
            font-weight: bold;
          }
          dd {
            display: inline-block;
            width: 620px;
          }
          dd a {
            border: 1px solid #ccc;
            color: #32639b;
            display: inline-block;
            text-align: center;
            width: 50px;
            padding: 5px 0;
            margin-right: 7px;
            margin-bottom: 10px;
            background-color: #d9e5f5;
            text-decoration: none;
          }
        }
      }
    }
    .bottom-btn {
      display: flex;
      justify-content: flex-end;
      img {
        cursor: pointer;
      }
    }
  }
  .parseBox {
    //休息片刻
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    text-align: center;
    line-height: 100vh;
    z-index: 1;
    margin: auto;
  }
  // 公共部分
  .r-c {
    color: #f00;
  }
  .r-c2 {
    color: #f00;
    font: bold 18px arial;
    text-shadow: 0 1px 0 #b2d8ff;
  }
  .examBox {
    .markTg {
      padding-left: 20px !important;
      background: url(../../assets/images/zht_06.gif) 0px 2px no-repeat;
    }
    .clearTg {
      padding-left: 20px !important;
      background: url(../../assets/images/zht_08.gif) 0px 2px no-repeat;
    }
    //整体
    position: relative;
    .exam-wrap {
      width: 100%;
      height: 100%;
    }
    user-select: none; //无法选中
    .footer {
      //底部
      display: flex;
      position: absolute;
      bottom: 0;
      padding: 10px;
      div {
        cursor: pointer;
      }
      .img2 {
        margin-left: 8px;
      }
      .img3 {
        margin-left: 6px;
      }
      .mark {
        margin-left: 40px;
        font-size: 14px;
      }
      .prev {
        margin-left: 70px;
      }
      .next,
      .select,
      .save,
      .end {
        margin-left: 8px;
      }
      .pause {
        margin-left: 60px;
      }
    }
    width: 1022px;
    border: 1px solid #c1cee3;
    height: 766px;
    background: url(../../static/images/bg-2.jpg);
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    padding: 0 8px;

    .headerBox {
      //头部
      padding: 10px 0 0px 0;
      .firstLine {
        //头部第一行
        display: flex;
        font-weight: bold;
        justify-content: space-between;
        .title {
          font-size: 20px;
        }
        .right {
          display: flex;
          font-size: 14px;
          align-items: flex-end;
          .examTime {
            padding-right: 80px;
            display: flex;
          }
        }
      }
      .secondLine {
        //頭部第二行
        padding-left: 30px;
        font-size: 12px;
        .introduction {
          height: 40px;
        }
      }
    }
    // 内容部分
    .contentBox {
      width: 1003px;
      height: 630px;
      margin: 0 auto;
      background: #fff;
      font-size: 14px;
      font-weight: normal;
      font-family: Tahoma, Arial;
      .question-box2 {
        height: 630px;
        overflow: hidden;
        // 公共部分
        .icon-pen,
        .icon-cal,
        .icon-book,
        .icon-flag,
        .icon-flag-c,
        .icon-copy,
        .icon-paste,
        .icon-cut,
        .icon-formula,
        .icon-ch,
        .icon-bulb,
        .icon-zoom-out,
        .icon-zoom-in,
        .icon-matrix {
          width: 20px;
          height: 20px;
          display: inline-block;
          vertical-align: middle;
          background: url(../../static/images/icon.png) no-repeat;
          margin-right: 3px;
        }
        .user-select {
          -webkit-touch-callout: text;
          -webkit-user-select: text;
          -khtml-user-select: text;
          -moz-user-select: text;
          -ms-user-select: text;
          user-select: text;
        }
        // 图标
        .icon-copy {
          background-position: -100px 0;
        }
        .icon-cut {
          background-position: -140px 0;
        }
        .icon-paste {
          background-position: -120px 0;
        }
        .icon-formula {
          background-position: -160px 0;
        }
        .icon-matrix {
          background-position: -260px 0;
        }
        .icon-cal {
          background-position: -20px 0;
        }
        .icon-zoom-in {
          background-position: -220px 0;
        }
        //题的内容
        .question-opt {
          position: relative;
          height: 345px;
          overflow: hidden;
          width: 98%;
          margin: 0 auto;
          border: 1px solid #c1cee3;
          background-color: #fff;
          .answer-area {
            // 答题区域
            height: 360px;
            overflow: auto;
            .ul-more-block {
              padding-right: 5px;
              overflow: auto;
              .txtArea {
                width: 100%;
                min-height: 230px;
                border: 1px solid #eee;
                overflow: auto;
                padding-top: 10px;
              }
            }
          }
          // 内容大题部分
          .ul-more-block {
            list-style: none;
            padding-left: 10px;
          }
          // 功能键列表
          /*滚动条样式*/
          .ul-more::-webkit-scrollbar {
            width: 6px;
            height: 6px;
          }
          .ul-more::-webkit-scrollbar-thumb {
            -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
            background: rgba(0, 0, 0, 0.2);
          }
          .ul-more::-webkit-scrollbar-track {
            -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
            border-radius: 0;
            background: rgba(0, 0, 0, 0.1);
          }
          .ul-more {
            position: absolute;
            top: 6px;
            left: 0px;
            list-style: none;
            margin: 0;
            padding: 2px 5px;
            li {
              list-style: none;
              // float: left;
              max-width: 61px;
              display: inline-block;
              border-radius: 5px 5px 0 0;
              padding: 2px 4px;
              border: 1px solid #2c3d51;
              border-bottom: none;
              margin-left: 3px;
              cursor: pointer;
              background: rgb(244, 244, 244);
              background: linear-gradient(
                top,
                rgba(244, 244, 244, 1) 0%,
                rgba(214, 218, 219, 1) 50%,
                rgba(182, 186, 189, 1) 100%
              );
              filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4f4f4', endColorstr='#b6babd',GradientType=0 );
              a {
                color: #000;
                text-decoration: none;
                font-weight: bold;
                font-size: 12px;
              }
            }

            .cur {
              background: rgb(250, 235, 192);
              background: linear-gradient(
                top,
                rgba(250, 235, 192, 1) 0%,
                rgba(225, 191, 117, 1) 50%,
                rgba(176, 111, 57, 1) 100%
              );
              filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#faebc0', endColorstr='#b06f39',GradientType=0 );
            }
          }
          // 公式等工具
          .toolbar {
            position: relative;
            background-color: #a3ccee;
            padding: 8px 10px 8px 0px;
            color: #000;
            height: 36px;
            font-size: 14px;
            .more {
              float: right;
              // 公式dialog
              .toolbar-pop {
                .arrow {
                  display: block;
                  position: absolute;
                  top: -6px;
                  left: 100px;
                  width: 10px;
                  height: 10px;
                  background-color: #fff;
                  border: 1px solid #c1cee3;
                  border-right: 0;
                  border-bottom: 0;
                  -moz-transform: rotate(45deg);
                  -o-transform: rotate(45deg);
                  -webkit-transform: rotate(45deg);
                  -ms-transform: rotate(45deg);
                  transform: rotate(45deg);
                  z-index: 1;
                }
              }
              .menuDiv2 {
                //表格和矩阵
                padding: 10px;
                width: auto;
                height: auto;
                background: #fff;
                color: #333;
                box-shadow: 2px 2px 10px #909090;
                font-size: 12px;
                overflow: hidden;
                z-index: 999999;
                .icon {
                  display: inline-block;
                  background: url(../../static/images/icon1.png) no-repeat;
                  display: inline-block;
                  margin-right: 5px;
                  vertical-align: middle;
                  width: 15px;
                  height: 15px;
                }
                .im2 {
                  height: 15px;
                  width: 15px;
                  background-position: -89px -21px;
                }
                .im3 {
                  height: 15px;
                  width: 15px;
                  background-position: -104px -21px;
                }
              }
              .menuDiv {
                //公式按钮组
                position: absolute;
                width: auto;
                height: auto;
                background: #fff;
                color: #333;
                box-shadow: 2px 2px 10px #909090;
                font-size: 12px;
                overflow: hidden;
                z-index: 999999;
                .tool-box {
                  > li {
                    width: 30px;
                    height: 30px;
                    float: left;
                    margin: 0 6px 6px 0;
                    border: solid 1px #ccc;
                    list-style: none;
                    background-image: url(../../static/images/function.gif);
                    background-repeat: no-repeat;
                    cursor: pointer;
                  }
                  .fraction {
                    background: url(../../static/images/function.gif);
                    background-position: 30px 60px;
                    cursor: pointer;
                  }
                }
                .title {
                  height: 26px;
                  padding: 4px 10px 0 10px;
                  margin: 0;
                  display: flex;
                  justify-content: space-around;
                  background: url(../../static/images/ColumnBg.gif) repeat-x;
                  > .current {
                    width: 93px;
                    height: 19px;
                    background: url(../../static/images/bg-menu-tab.gif)
                      no-repeat 0 0;
                  }
                  > li {
                    width: 93px;
                    height: 22px;
                    font-weight: bold;
                    color: #000;
                    text-decoration: none;
                    text-align: center;
                    display: inline-block;
                    padding-top: 5px;
                    margin-right: 2px;
                    cursor: pointer;
                  }
                }
              }
            }
            .more span {
              border-left: 1px dotted #ccc;
              padding-left: 8px;
              margin-left: -4px;
              cursor: pointer;
            }
          }
        }
        // 题干
        .question-info {
          width: 98%;
          margin: 0 auto;
          border: 1px solid #c1cee3;
          background-color: #fff;
          // 题内容
          .i-question {
            height: 240px;
            overflow-y: auto;
            text-indent: 20px;
            padding: 5px;
            transition-duration: 0.3s;
          }
          // 头部
          .hd {
            background-color: #e5edf8;
            padding: 5px 10px;
            .icon-book {
              background-position: -40px 0;
            }
            .more {
              float: right;
              span {
                border-left: 1px dotted #ccc;
                padding-left: 8px;
                margin-left: 8px;
                cursor: pointer;
                .icon-zoom-in {
                  background-position: -220px 0;
                }
              }
            }
          }
        }
      }
      .headerPart {
        background-color: #a3ccee;
        padding: 8px 10px;
        color: #000;
        height: 36px;
        display: flex;
        justify-content: space-between;
        .leftPart {
          display: flex;
          align-items: center;
          .icon {
            background: url(../../static/images/icon.png) no-repeat;
            width: 20px;
            height: 20px;
          }
        }
        .rightPart {
          cursor: pointer;
          display: flex;
          align-items: center;
          .icon {
            background: url(../../static/images/icon.png) no-repeat;
            background-position: -20px 0;
            width: 20px;
            height: 20px;
          }
        }
      }
      .content {
        height: 480px;
        padding: 0 10px;
        overflow-y: auto;
        .title {
          // display: flex;
          font-weight: bold;
          font-size: 14px;
          line-height: 1.5;
          margin-left: 10px;
          padding-top: 10px;
        }
        .choiceBox {
          line-height: 1.5;
          padding: 10px 30px;
          .choice {
            display: flex;
            padding: 0px 0;
            font-weight: 400 !important;
            align-items: flex-start;
            input {
              outline: none;
              margin-right: 5px;
            }
          }
        }
      }
    }
  }
  // 结束考试
  .endExam {
    .bg-light {
      position: relative;
      width: 1024px;
      height: 768px;
      margin: 0 auto;
      background: url(../../static/images/bg-light.jpg) no-repeat;
      border: 1px solid #c1cee3;
      overflow: hidden;
      .logo,
      .logo-m {
        position: absolute;
        top: 20px;
        left: 10px;
        width: 150px;
        height: 150px;
      }
      .pc-number {
        font: bold 30px "simhei";
        position: absolute;
        top: 10px;
        right: 0px;
        span {
          font: bold 44px arial;
          color: #f00;
          padding-right: 20px;
          vertical-align: -5px;
          margin-left: 15px;
          text-shadow: 0 1px 0 #b2d8ff;
        }
      }
      .h1-large {
        width: 100%;
        text-align: center;
        margin-top: -30px;
      }
    }
  }
  // 富文本样式
  /* table 样式 */
  table {
    border-top: 1px solid #ccc;
    border-left: 1px solid #ccc;

    td {
      border: 1px solid #111 !important;
    }
  }
  table td,
  table th {
    text-indent: 0;
    border-bottom: 1px solid #ccc;
    border-right: 1px solid #ccc;
    padding: 3px 5px;
    text-align: center;
    p {
      text-align: center;
    }
  }
  table th {
    border-bottom: 2px solid #ccc;
    text-align: center;
  }

  /* blockquote 样式 */
  blockquote {
    display: block;
    border-left: 8px solid #d0e5f2;
    padding: 5px 10px;
    margin: 10px 0;
    line-height: 1.4;
    font-size: 100%;
    background-color: #f1f1f1;
  }

  /* code 样式 */
  code {
    display: inline-block;
    *display: inline;
    *zoom: 1;
    background-color: #f1f1f1;
    border-radius: 3px;
    padding: 3px 5px;
    margin: 0 3px;
  }
  pre code {
    display: block;
  }

  /* ul ol 样式 */
  ul,
  ol {
    margin: 10px 0 10px 20px;
  }
}
</style>